<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>垂直卡片滑动动画</title>
  <style>
  * {
    margin: 0;
    padding: 0;
  }
  body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(200deg, #fda09b, #918ef9);
  }
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 500px;
      height: 300px;
    }


    .card {
      width: 430px;
      height: 100px;
      background-color: #fff;
      border-radius: 100px 20px 20px 100px;
      position: absolute;
      padding: 0 20px;

      display: flex;
      justify-content: space-between;
      align-items: center;
      opacity: 0;
      animation: animate 10s linear infinite;
      animation-delay: calc(2s * var(--d));
    }
    /* 鼠标移入,动画暂停 */
    .container:hover .card {
      animation-play-state: paused;
    }

    .card .img {
      width: 90px;
      height: 90px;
      position: absolute;
      left: 0;
      top: 0;
      background-color: #fff;
      padding: 5px;
      border-radius: 50%;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    }
    .card .img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }
    
    .card .content {
      display: flex;
      align-items: center;
    }
    .card .detail {
      margin-left: 100px;
    }
    .card .detail span {
      display: block;
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .card a {
      font-size: 14px;
      text-decoration: none;
      background: linear-gradient(to bottom, #fbc5ed, #a6c1ee);
      padding: 7px 18px;
      color: #fff;
      border-radius: 25px;
    }

    /* 定义动画 */
    @keyframes animate {
      0% {
        opacity: 0;
        transform: translateY(100%) scale(0.5);
      }
      5%,20% {
        opacity: 0.4;
        transform: translateY(100%) scale(0.7);
      }
      25%,40% {
        opacity: 1;
        transform: translateY(0%) scale(1);
      }
      45%,60% {
        opacity: 0.4;
        transform: translateY(-100%) scale(0.7);
      }
      65%,100% {
        opacity: 0;
        transform: translateY(-100%) scale(0.5);
      }
    }

    .register {
      width: 400px;
      height: 200px;
      background-color: rgba(0, 0, 0, 0.65);
      box-shadow: 0px 2px 11px 0px rgba(0, 0, 0, 0.5);
      padding: 0 30px;
      border-radius: 5px;
      margin-left: 30px;
    }
    .register p {
      color: #fff;
      font-size: 24px;
      line-height: 86px;
      text-align: center;
      height: 80px;
      border-bottom: 1px solid #eee;
    }
    .register .btn {
      height: 60px;
      line-height: 60px;
      font-size: 24px;
      border-radius: 4px;
      padding: 0 20px;
      margin-top: 20px;
      text-align: center;
      color: #fff;
      background: linear-gradient(-135deg, #856df1, #a468ef);
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="container">
    <!-- --d是自定义属性,可通过var函数对其调用 -->
    <div class="card" style="--d:-1;">
      <div class="content">
        <div class="img">
          <img src="./images/1.jpg" alt="">
        </div>
        <div class="detail">
          <span>王婉儿（Anna）</span>
          <p>寻找真爱的微笑使者。</p>
        </div>
      </div>
      <a href="#">关注</a>
    </div>
    <div class="card" style="--d:0;">
      <div class="content">
        <div class="img">
          <img src="./images/2.jpg" alt="">
        </div>
        <div class="detail">
          <span>李清雨（Lily）</span>
          <p>用心灵构建美好的婚姻。</p>
        </div>
      </div>
      <a href="#">关注</a>
    </div>
    <div class="card" style="--d:1;">
      <div class="content">
        <div class="img">
          <img src="./images/3.jpg" alt="">
        </div>
        <div class="detail">
          <span>张蓝心（Amy）</span>
          <p>相信缘分，等待幸福的到来。</p>
        </div>
      </div>
      <a href="#">关注</a>
    </div>
    <div class="card" style="--d:2;">
      <div class="content">
        <div class="img">
          <img src="./images/4.jpg" alt="">
        </div>
        <div class="detail">
          <span>赵梦婷（Freya）</span>
          <p>热情洋溢，寻找属于我的爱情。</p>
        </div>
      </div>
      <a href="#">关注</a>
    </div>
    <div class="card" style="--d:3;">
      <div class="content">
        <div class="img">
          <img src="./images/5.jpg" alt="">
        </div>
        <div class="detail">
          <span>陈思雪（Alice）</span>
          <p>勇敢追求幸福，不断向前。</p>
        </div>
      </div>
      <a href="#">关注</a>
    </div>
  </div>

<div class="register">
  <p>60秒完成注册，幸福一辈子!</p>
  <div class="btn">免费注册</div>
</div>

</body>

</html>